<template>
  <el-container class="main-container">
    <el-backtop :bottom="100" :right="60"/>
<!--    <div class="top2-div">-->
      <!--      <div class="logo-div">-->
      <!--        <img src="/src/assets/images/logo.png" style="width: 100%;position: center"/>-->
      <!--      </div>-->
      <!--      <div class="search-div">-->
      <!--        <div class="flex-grow" style="flex-grow: 1;"/>-->
      <!--        <el-input v-model="input"-->
      <!--                  style="width: 600px; height: 50px; font-size: 18px;"-->
      <!--                  placeholder="搜索职位、公司"-->
      <!--                  size="large"/>-->
      <!--        <el-button type="primary"-->
      <!--                   style="height: 50px; font-size: 18px; text-align: center"-->
      <!--                   :icon="Search"-->
      <!--                   size="large"-->
      <!--                   @click="searchMassage(input)">搜索-->
      <!--        </el-button>-->
      <!--        <div class="flex-grow" style="flex-grow: 1;"/>-->
      <!--      </div>-->
      <!-- 热门职位标签 -->
<!--      <div style="display: flex; margin-top: 10px">-->
<!--        <div class="flex-grow" style="flex-grow: 1;"/>-->
<!--        <el-text size="large">热门职位：</el-text>-->
<!--        &lt;!&ndash; 标签 &ndash;&gt;-->
<!--        <div style="display: flex; padding: 10px 5px;">-->
<!--          <el-tag type="warning" effect="light" style="margin-right: 5px; font-size: 14px"-->
<!--                  v-for="item in hotJob" key="item" size="large"-->
<!--                  @click="hotClick(item)">-->
<!--            {{ item }}-->
<!--          </el-tag>-->
<!--        </div>-->
<!--        <div class="flex-grow" style="flex-grow: 1;"/>-->
<!--      </div>-->
<!--    </div>-->
    <div class="center-menu">
<!--      &lt;!&ndash; 分类 &ndash;&gt;-->
<!--      <el-card class="left-classify" shadow="never">-->
<!--        <ul>-->
<!--          <li v-for="item in classify" :key="item.id" class="classify-item">-->
<!--            &lt;!&ndash;            <p v-for="i in item.lei">{{i}}</p>&ndash;&gt;-->
<!--            <img :src="item.img" style="width: 20px; height: 20px; padding-right: 5px"/>-->
<!--            <el-text v-for="(i, index) in item.lei" :key="index">-->
<!--              <el-text v-show="index!=0" size="large">|</el-text>-->
<!--              <el-text @click="searchClassify(i)" size="large">{{ i }}</el-text>-->
<!--            </el-text>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </el-card>-->
      <!-- 轮播图 -->
<!--      <div class="right-item">-->
      <div style="width: 1200px;">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in rightImgs" :key="item.id">
            <img :src="item.src" height="100%" width="100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <h1 style="text-align: center; margin: 20px 0">精选</h1>
    <div class="main-pane">
      <el-tabs v-model="paneName" class="post-tab" @tab-click="changePane">
        <el-tab-pane label="全部求职者" name="pane1" style="display: flex; flex-wrap: wrap;">
          <!-- 职位卡片 -->
          <el-card v-for="(item,index) in allSeeker" key="item.id"
                   style="width: 560px;border-radius: 10px; margin: 5px 5px"
                   @click="allSeekerClick(item.userId,index)">
            <!-- 职业名称、薪资 -->
            <div style="display: flex">
              <el-text size="large" style="font-size: 22px;font-weight: bold">{{ item.name }}</el-text>
              <!-- 职业名称 -->
              <div style="flex-grow: 1"></div>
              <el-text v-show="item.expectPosition!==null&&item.expectPosition!==''"
                       style="font-size: 18px; font-weight: bold; color: #f26d49; float: right;">{{ item.expectPosition }} ·
                {{ item.expectSalary }}
              </el-text>
              <!-- 薪资 -->
            </div>
            <!-- 标签 -->
            <div style="display: flex; padding: 10px 5px">
              <el-tag v-show="item.gender!==null&&item.gender!==''" style="margin-right: 5px">{{ item.gender }}</el-tag>
              <el-tag v-show="item.graduateSchool!==null&&item.graduateSchool!==''" style="margin-right: 5px">
                {{ item.graduateSchool }}
              </el-tag>
              <el-tag v-show="item.eduBackground!==null&&item.eduBackground!==''" style="margin-right: 5px">
                {{ item.eduBackground }}
              </el-tag>
              <el-tag v-show="item.major!==null&&item.major!==''" style="margin-right: 5px">{{ item.major }}</el-tag>
              <!--              <el-tag style="margin-right: 5px">{{ item.age_require }}</el-tag>-->
              <el-tag v-show="item.skill!==null&&item.skill!==''" style="margin-right: 5px">{{ item.skill }}</el-tag>
            </div>
            <div>
              <el-text line-clamp="2">
                {{ item.introduce }}
              </el-text>
            </div>
            <!--            &lt;!&ndash; 底部信息 &ndash;&gt;-->
            <!--            <template #footer>-->
            <!--              <div style="display:flex; margin:0 20px">-->
            <!--                <el-text size="large">{{ item.user_nick }}</el-text>-->
            <!--                <div style="flex-grow: 1"></div>-->
            <!--                <el-text size="large">-->
            <!--                  {{ item.company_nick }}-->
            <!--                  <el-divider direction="vertical"/>-->
            <!--                  {{ item.company_address }}-->
            <!--                </el-text>-->
            <!--              </div>-->
            <!--            </template>-->
          </el-card>
          <div style="width:100%; display: flex; margin: 20px 0 50px 0">
            <div class="flex-grow" style="flex-grow: 1;"/>
            <el-button plain style="width: 200px; font-size: 16px; height: 40px" type="primary" @click="lookAllJob">
              查看更多
            </el-button>
            <div class="flex-grow" style="flex-grow: 1;"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
        v-model="messageDialog"
        :append-to-body="true"
        :close-on-click-modal="false"
        :lock-scroll="false"
        class="el-dialog"
        style="display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;"
        title="求职者详细信息"
    >
      <el-card>
        <!--    <el-card style="width:720px;padding: 30px; margin: 30px 200px 30px 50px;min-height: calc(100vh - 125px); ">-->
        <template id="part1" style="display: flex;flex-direction: column">
          <div style="margin: 20px 0;">
            <el-text v-show="selectedSeeker.userNick!==''&&selectedSeeker.userNick!== null" class="title-div-text"
                     style="font-weight: bolder">
              {{ selectedSeeker.userNick }}
            </el-text>
            <el-text v-show="selectedSeeker.name!==''&&selectedSeeker.name!== null" class="title-div-text"
                     style="font-weight: bolder">
              ({{ selectedSeeker.name }})
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Calendar/>
              </el-icon>
              {{ birth }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <User/>
              </el-icon>
              {{ selectedSeeker.gender }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Position/>
              </el-icon>
              {{ selectedResume.politicalStatus }}
            </el-text>
            <el-text v-show="selectedSeeker.idCard!==''&&selectedSeeker.idCard!==null" class="text-item">
              <el-icon>
                <Postcard/>
              </el-icon>
              {{ selectedSeeker.idCard }}
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text v-show="selectedResume.graduateTime!==null" class="text-item">
              <el-icon>
                <Suitcase/>
              </el-icon>
              {{ graduateTime }}届毕业生
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Reading/>
              </el-icon>
              {{ selectedResume.eduBackground }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <PriceTag/>
              </el-icon>
              {{ selectedSeeker.status }}
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Phone/>
              </el-icon>
              {{ selectedSeeker.phone }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Message/>
              </el-icon>
              {{ selectedSeeker.email }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Place/>
              </el-icon>
              {{ selectedSeeker.address }}
            </el-text>
          </div>
        </template>

        <template id="part2" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              个人介绍
            </el-text>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ selectedResume.introduce }}</el-text>
          </div>
        </template>

        <template id="part3" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              期望职位
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Position/>
              </el-icon>
              {{ selectedResume.expectPosition }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Coin/>
              </el-icon>
              {{ selectedResume.expectSalary }}
            </el-text>
          </div>
        </template>

        <template id="part4" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              工作/实习经历
            </el-text>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ selectedResume.workExperience }}</el-text>
          </div>
        </template>

        <template id="part5" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              教育经历
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text style="font-weight: bolder; margin-right: 20px">
              <el-icon>
                <School/>
              </el-icon>
              {{ selectedResume.graduateSchool }}
            </el-text>
            <el-text>
              <el-icon>
                <Brush/>
              </el-icon>
              {{ selectedResume.major }}
            </el-text>
            <el-text v-show="selectedResume.eduBackground!==null">（{{ selectedResume.eduBackground }}）</el-text>
          </div>
        </template>

        <template id="part6" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              专业技能
            </el-text>
          </div>
          <div v-show="skillTagForm.length>0" class="one-row" style="display: flex">
            <el-tag v-for="item in skillTagForm" key="item" style="margin-right: 10px">
              {{ item }}
            </el-tag>
          </div>
        </template>

        <template id="part7" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              获奖记录
            </el-text>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ selectedResume.rewards }}</el-text>
          </div>
        </template>
      </el-card>
    </el-dialog>
  </el-container>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios"
import {Delete, Edit, Search, Share, Upload} from '@element-plus/icons-vue'
import router from "../../router/router";
import {recruiterApi} from "../../api/app";

const paneName = ref("pane1") // 标签页
// 轮播图
const rightImgs = [
  {id: '6', src: '/src/assets/images/icons/right4.png'},
  {id: '5', src: '/src/assets/images/icons/right5.png'},
  {id: '4', src: '/src/assets/images/icons/right6.png'},
  {id: '1', src: '/src/assets/images/icons/right7.jpg'},
  {id: '2', src: '/src/assets/images/icons/right8.jpg'},
  {id: '3', src: '/src/assets/images/icons/right9.jpg'},
]
//分类
const classify = [
  {id: '1', lei: ["销售 ", "市场 ", "客服 ", "贸易"], img: "/src/assets/images/icons/icon1.png"},
  {id: '2', lei: ["经管 ", "人事 ", "行政 ", "财务"], img: "/src/assets/images/icons/icon2.png"},
  {id: '3', lei: ["生产 ", "质管 ", "技工 ", "物流"], img: "/src/assets/images/icons/icon3.png"},
  {id: '4', lei: ["教育 ", "法律 ", "咨询 ", "翻译"], img: "/src/assets/images/icons/icon4.png"},
  {id: '5', lei: ["零售 ", "家政 ", "餐饮 ", "旅游"], img: "/src/assets/images/icons/icon5.png"},
  {id: '6', lei: ["广告 ", "媒体 ", "艺术 ", "出版"], img: "/src/assets/images/icons/icon6.png"},
  {id: '7', lei: ["IT ", "互联网 ", "通信"], img: "/src/assets/images/icons/icon7.png"},
]
//热门职位
const hotJob = ['Java后端开发', 'vue前端', '软件测试', '厨师', '建筑'];
const graduateTime = ref('')
const birth = ref('')
const skillTagForm = ref([])
const input = ref('') //搜索框内容
const messageDialog = ref(false)

const pageSize = ref(10)
const pageNum = ref(1)

const selectedSeeker = ref({
  id: "",
  userId: "",
  name: "",
  gender: "",
  birth: "",
  phone: "",
  email: "",
  politicalStatus: "",
  eduBackground: "",
  graduateSchool: "",
  graduateTime: "",
  major: "",
  skill: "",
  workExperience: "",
  rewards: "",
  expectPosition: "",
  expectSalary: "",
  introduce: "",
  userImage: null
})
const selectedResume = ref()
const allSeeker = ref([
  {
    id: "1773714020035780609",
    userId: "1773705270180765697",
    name: "王晓涵",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: "vue",
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "后端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }])

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

const getData = () => {
  recruiterApi.getAllResume({
    size: pageSize.value,
    page: pageNum.value
  })
      .then((res) => {
        console.log(res)
        allSeeker.value = res.data
      })
      .catch((error) => {
        console.log(error)
      })
}

const hotClick = (key) => {
  searchMassage(key)
}

//改变标签页
const changePane = () => {
  // console.log(tab)
  if (paneName.value === 'pane1') {
    onMounted(null)
  }
}

//搜索职业
const searchMassage = (key) => {
  console.log(key)
}
//根据分类搜索
const searchClassify = (key) => {
  searchMassage(key)
}

const allSeekerClick = (id, index) => {
  // getSeeker(id)
  selectedResume.value = allSeeker.value[index]
  getMessage(selectedResume.value.userId)
  messageDialog.value = true
}

const getMessage = (id) => {
  recruiterApi.getSeekerMessage({id: id})
      .then((res) => {
        console.log(res)
        selectedSeeker.value = res.data
        if (selectedResume.value.skill !== null && selectedResume.value.skill !== '') {
          //分割字符串
          let s = selectedResume.value.skill
          skillTagForm.value = s.split(',')
          console.log(skillTagForm.value)
        }
        if (selectedResume.value.graduateTime !== null && selectedResume.value.graduateTime !== '') {
          let s = selectedResume.value.graduateTime
          graduateTime.value = s.split('-')[0]
        }
        if (selectedResume.value.birth !== null && selectedResume.value.birth !== '') {
          let s = selectedResume.value.birth
          birth.value = s.split('T')[0]
        }
      })
      .catch((error) => {
        console.log(error)
      })
}

//点击查看更多---全部职业
const lookAllJob = () => {
  pageNum.value = pageNum.value + 1
  recruiterApi.getAllResume({
    size: pageSize.value,
    page: pageNum.value
  })
      .then((res) => {
        console.log(res)
        allSeeker.value = allSeeker.value.concat(res.data)
        console.log(allSeeker.value)
      })
      .catch((error) => {
        console.log(error)
      })
}

</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  margin: 0 120px;
  padding: 0;
  /*background-color: black;*/
}

.top2-div {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: 30px;
}

.search-div {
  display: flex;
}

.center-menu {
  margin: 20px 0;
  display: grid;
  grid-template-areas: "l r r r";
}

.center-menu .left-classify {
  grid-area: l;
}

.center-menu .right-item {
  grid-area: r;
}

.center-menu .left-classify {
  border: #E1E1E1 1px solid;
  margin-right: 10px;
}

.center-menu .left-classify .classify-item {
  /*display: inline-block;*/
  margin-left: 17px;
  width: auto;
  border-bottom: 1px #E8E8E8 solid;
  line-height: 34px;
  cursor: pointer;
  list-style-type: none;
}

.post-tab > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.title-div {
  border-left: 5px solid #00ab6d;
  margin: 10px 0;
}

.title-div-text {
  margin-left: 10px;
  font-size: 20px;
  color: black;
}

.button-item {
  float: right;
  color: #00ab6d;
  margin-left: 10px;
}

.text-item {
  margin-right: 20px;
}

.one-row {
  margin-bottom: 5px;
}
</style>
